<template>
	<view class="my">




		<view class="header">
			<view class="top">
				<image src="../../static/img/address.png" mode="widthFix" class="address"></image>
				<view class="detial">
					<view class="area">
						<view class="tip">
							地址信息
						</view>
						<view class="">
							{{info.addressInfo.province}}/{{info.addressInfo.city}}/{{info.addressInfo.area}}
						</view>
					</view>
					<view class="" style="font-weight: 600;">
						{{info.addressInfo.detail}}
					</view>
					<view class="" style="color: #1E1E1E;font-size: 28rpx;">
						{{info.addressInfo.username}} {{info.addressInfo.mobile}}
					</view>
				</view>

			</view>
			<view class="item">
				<image :src="'https://ba.fuliaoxx.com' + info.goodsInfo.image" mode="" class="good"></image>
				<view class="detail">
					<view class="name">
						{{info.goodsInfo.name}}
					</view>
					<view class="" style="color: grey;font-size: 24rpx;">
						{{info.shopInfo.address}}
					</view>
					<view class="num">
						<view class="" style="color: #FC5D2B;">
							￥{{info.goodsInfo.price}}
						</view>
						<view class="" style="font-weight: 600;font-size: 32rpx;padding-right: 20rpx;">
							×{{info.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="types">
				<view class="line" v-if="info.service=='1'">
					<view class="" style="font-size: 24rpx;color: grey;">
						服务类型：
					</view>到店
				</view>
				<view class="line" v-if="info.service=='2'">
					<view class="" style="font-size: 24rpx;color: grey;">
						服务类型：
					</view>
					预约上门
					<text style="color: red;font-size: 26rpx;" v-if="info.is_destory=='1'">(等待核销)</text>
					<text style="color: red;font-size: 26rpx;" v-else>(已核销)</text>
				</view>
				<view class="line" v-if="info.service=='2'">
					<view class="" style="font-size: 24rpx;color: grey;">
						核销二维码：
					</view>
					<image :src="url" mode="widthFix" style="width: 300rpx;"></image>
				</view>

				<view class="line">
					<view class="" style="font-size: 24rpx;color: grey;">
						备注：
					</view>
					{{info.remark||'---'}}
				</view>
			</view>
		</view>
		<view class="footer" v-if="info.service=='1'">
			<view class="num">
				总价：
				<text style="color: #ff0000;font-size: 38rpx;">￥{{info.goodsInfo.price * info.num}}</text>
			</view>
		</view>
		<view class="footer" v-if="info.service=='2'" style="position: relative;">
			<view class="num">
				总价：
				<text style="color: #ff0000;font-size: 38rpx;">￥{{info.goodsInfo.price * info.num}}</text>
			</view>
		</view>
		<view class="" style="height: 14rpx;">

		</view>
	</view>
</template>

<script>
	import {
		orderCode
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				url: '',
				info: {
					address: {},
				}
			}
		},

		async onLoad(opt) {
			this.info = JSON.parse(opt.item)
			if (this.info.service == '2') {
				let res = await orderCode(this.info.id)
				console.log(res)
				this.url = 'https://ba.fuliaoxx.com/' + res.data.codeUrl;
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	/deep/ .line {
		input {
			text-align: right !important;
		}
	}

	.types {
		position: relative;
		border-radius: 30rpx;
		background-color: white;
		padding: 10rpx 20rpx;
		box-shadow: 2rpx 6rpx 8rpx #e7e7e7;

		.line {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
		}
	}

	.footer {
		background-color: white;
		display: flex;
		margin: 12px;
		border-radius: 12px;
		box-sizing: border-box;

		.num {
			display: flex;
			align-items: center;
			flex: 2;
			display: flex;
			padding: 25rpx 0;
			padding-right: 30rpx;
			justify-content: flex-end;
			font-size: 26rpx;
		}


	}

	.my {
		height: 100%;
		box-sizing: border-box;

		.bg {
			position: fixed;
			width: 100%;
			background-color: #FBDB0C;
			height: 180rpx;
			top: 0;
		}

		.border {
			position: fixed;
			width: 100%;
			background-color: #F8F8F8;
			height: 80rpx;
			top: 120rpx;
			z-index: 1;
			border-radius: 50rpx 50rpx 0 0;
		}

		.header {
			position: relative;
			z-index: 1;
			margin: 0 30rpx;
			box-sizing: border-box;
			// height: calc(100% - 200rpx);

			.top {
				position: relative;
				border-radius: 30rpx;
				background-color: white;
				padding: 30rpx 20rpx;
				box-shadow: 2rpx 6rpx 8rpx #e7e7e7;

				image {
					position: absolute;
					bottom: 30rpx;
					right: 20rpx;
					width: 140rpx;
				}

				.detial {
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.area {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.tip {
							background-color: #75D65E;
							padding: 6rpx 10rpx;
							margin-right: 20rpx;
							border-radius: 10rpx;
						}
					}
				}
			}

			// 	.items {
			// 		height: calc(100% - 220rpx);
			// 		margin-top: 20rpx;
			// 		border-radius: 30rpx;
			// 		background-color: white;
			// 		padding: 0 30rpx;
			// 		box-sizing: border-box;


			// 	}
			.item {
				display: flex;
				margin: 50rpx 0;
				box-shadow: 2rpx 6rpx 8rpx #e7e7e7;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: white;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.detail {
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					padding: 6rpx 0;
					box-sizing: border-box;

					.num {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}
	}

	.header-box {
		border-radius: 60rpx;
		background: #f8f8f8;
		position: relative;
		z-index: 999;
	}
</style>